<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度地图学习实例</title>
    <!--加一下这个移动端的自适应-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!--在这里添加下百度地图的浏览器端的密钥-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=TtGaf9hTGI6iO6oB6Y9vqOmnruoIHXLB" type="text/javascript"></script>
    <style>
        html {
            height:100%;
        }
        body {
            height:100%;
            margin:0;
            padding:0;
        }
        #container {
            height:100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
    //进行百度地图的初始化
    var map = new BMap.Map("container");          // 创建地图实例
    //var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    var point = new BMap.Point(113.758652,34.734857);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom();

    //添加控件

    //地图缩放平移
    map.addControl(new BMap.NavigationControl());
    //缩放地图控件
    map.addControl(new BMap.OverviewMapControl());
    //比例尺的控件
    map.addControl(new BMap.ScaleControl());
    //地图类型的控件
    map.addControl(new BMap.MapTypeControl());
    //地图版本的控件
    //map.addControl(new BMap.CopyrightControl());
    //定位的控件
    map.addControl(new BMap.GeolocationControl());

    map.setCurrentCity("郑州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用


    //自定义控件

    //1.第一步，创建一个控件的类，让它继承自control

    // 定义一个控件类，即function
    function ZoomControl(){
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(50,50);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

    //2.第二步，给这个控件类中添加initialize方法,声明下这个控件的样式和行为
    ZoomControl.prototype.initialize = function(map){
        // 创建一个DOM元素
        var div = document.createElement("div");
        // 添加文字说明
        div.appendChild(document.createTextNode("放大2级"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "white";
        // 绑定事件，点击一次放大两级
        div.onclick = function(e){
            map.zoomTo(map.getZoom() + 2);
        }
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    }

    //3.最后一步，实例化这个控件类，并且通过addControl方法添加到地图中去.
    var myZoomCtrl = new ZoomControl();
    map.addControl(myZoomCtrl);

    //添加标注
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);

    //给标注添加双击click事件
    /*marker.addEventListener('click',function(e){
        alert('我被单击了');
    })*/
    //让标注变的可以拖拽
    marker.enableDragging();

    //拖拽的时候可以响应dragend事件
    /*marker.addEventListener('dragend',function(e){
        alert('当前位置---' + '经度:' + e.point.lng + '纬度:' + e.point.lat)
    })*/

    //添加信息窗口
    //这里，这个窗口有个最小值，请大家注意.宽250,高100
    var opts = {
        /*width : 300,     // 信息窗口宽度
        height: 200,     // 信息窗口高度*/
        /*title : "Hello"  // 信息窗口标题*/
    }
    var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

    //添加折线
    var polyline = new BMap.Polyline([
                new BMap.Point(113.758652,34.734857),
                new BMap.Point(113.727822, 34.732691)
            ],
            {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5}
    );
    map.addOverlay(polyline);

    /*//1.自定义覆盖物类创建,这个类是继承overlay类的
    function SquareOverlay(center, length, color){
        this._center = center;
        console.log(center);
        this._length = length;
        this._color = color;
    }
    // 继承API的BMap.Overlay
    SquareOverlay.prototype = new BMap.Overlay();

    //2.给这个类添加initialize方法,初始化这个自定义的覆盖物
    // 实现初始化方法
    SquareOverlay.prototype.initialize = function(map){
        // 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var div = document.createElement("div");
        div.style.position = "absolute";
        // 可以根据参数设置元素外观
        div.style.width = this._length + "px";
        div.style.height = this._length + "px";
        div.style.background = this._color;
        // 将div添加到覆盖物容器中
        map.getPanes().markerPane.appendChild(div);
        // 保存div实例
        this._div = div;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;
    }
    //3.将这个覆盖物添加到指定的位置上去
    // 实现绘制方法
    SquareOverlay.prototype.draw = function(){
        // 根据地理坐标转换为像素坐标，并设置给容器
        var position = this._map.pointToOverlayPixel(this._center);
        this._div.style.left = position.x - this._length / 2 + "px";
        this._div.style.top = position.y - this._length / 2 + "px";
    }


    //4.直接添加覆盖物
    // 添加自定义覆盖物
    var mySquare = new SquareOverlay(map.getCenter(), 50, "red");
    map.addOverlay(mySquare);*/


    //点击后出来红色小标注
















</script>